import React, { useContext } from 'react';
import { ReplyContext } from './context';
import styles from './index.less';

const TotalWord: React.FC<{ minWordCount: number }> = (props) => {
  const { minWordCount } = props;
  const { inputList, totalWordCount } = useContext(ReplyContext);

  return (
    <div className={styles['total-text']}>
      以上{inputList && inputList.length}项需累计输入<span>{minWordCount}</span>字以上,还差
      <span>{minWordCount - totalWordCount > 0 ? minWordCount - totalWordCount : 0}</span>字
    </div>
  );
};

export default TotalWord;
